<template>
  <div class="scan">

    <div id="bcid">
      <div class="header"
           style="height:5%;width: 100%;background: rgba(0,0,0,0);position: absolute">
        <div class="return" @click="jumpPage"
             style="position: absolute;top:.6rem;left:1rem;width: 1.3rem;height: 1.3rem;z-index:9999">
          <img src="static/img/return3.png" width="100%" height="100%"/>
        </div>
        <h3 style="margin:.4rem auto 0rem auto">扫一扫</h3>
      </div>

    </div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import {} from 'mint-ui'

  export default {
    data() {
      return {
        codeMsg: '',
        coin:''
      }
    },
    created(){
        this.coin=this.currentAccount.currentCoin
    },
    computed: {
      ...mapGetters(['currentAccount'])
    },
    mounted(){

      this.startRecognize()
    },
    methods: {
      //创建扫描控件
      jumpPage(){
        if(this.coin){
          this.$router.push({name:'TransactionERC',params:{coin:this.coin}})
          scan.close()
        }else{
          this.$router.back()
          scan.close()
        }
      },
      startRecognize() {
        let _this = this;
        if (!window.plus) return;
        scan = new plus.barcode.Barcode('bcid');
        scan.onmarked = onmarked;

        let sc=setInterval(()=>{
          scan.start();
        },100)
        function onmarked(type, result, file) {
          switch (type) {
            case plus.barcode.QR:
              type = 'QR';
              break;
            case plus.barcode.EAN13:
              type = 'EAN13';
              break;
            case plus.barcode.EAN8:
              type = 'EAN8';
              break;
            default:
              type = '其它' + type;
              break;
          }
          result = result.replace(/\n/g, '');
          _this.closeScan();

            try {
              _this.codeMsg =JSON.parse(result);
              if(!_this.codeMsg){
                Dialog.alert({
                  title: '提示',
                  message: '不是有效的付款码!'
                }).then(() => {
                  // on close
                });
                _this.$router.back()
              }
              else if(!_this.codeMsg.value||!_this.codeMsg.orderNo||!_this.codeMsg.address||!_this.codeMsg.returnUrl){
                Dialog.alert({
                  title: '提示',
                  message: '付款码参数有误!'
                }).then(() => {
                  // on close
                });
                _this.$router.back()
                // scan.start();
              }
              if(_this.codeMsg.address.toLowerCase()!=_this.currentAccount.address.toLowerCase()){
                Dialog.alert({
                  title: '提示',
                  message: '支付码与当前钱包账户不匹配!'
                }).then(() => {
                  // on close
                });
                _this.$router.back()
              }
              clearInterval(sc)
              _this.closeScan();

              _this.$router.push({name:'Pay',params:{coin:_this.coin,codeMsg:_this.codeMsg}})
            }catch (e) {
              Dialog.alert({
                title: '提示',
                message: '二维码有误!'
              }).then(() => {
                // on close
              });
              // scan.start();
              // console.log(e)
              //_this.$router.back()
            }

        }
      },
      //开始扫描
      startScan() {
        if (!window.plus) return;
        scan.start();
      },
      //关闭扫描
      cancelScan() {
        if (!window.plus) return;
        scan.cancel();
      },
      //关闭条码识别控件
      closeScan() {
        if (!window.plus) return;
        scan.close();
      }
    }
  }
</script>
<style >

  .scan{
    width: 100%;
    height: 100%;
  }
  #bcid {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    text-align: center;
    color: #fff;
    background: #ccc;
  }
</style>
